<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		body,html{
			font-family: "微软雅黑";
			position: relative;
			width: 100%;
			height: 100%;
		}
		/*.alertPanel{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0,0,0,0.3);
		}*/
		#btn{
			display: inline-block;
			width:90px;
			height:48px;
			line-height: 48px;
			outline: none;
			text-align: center;
			border:1px solid #ddd;
			background-color: #f6f6f6;
			border-radius: 6px;
			cursor: pointer;
			font-weight: bold;
		}
		
		#msg{
		   width: 400px;
		   height: 200px;
		   border: 1px solid #DCDCDC;
		   box-shadow: 0px 0px 20px #DCDCDC;
		   position: absolute;
		   left: 50%;
		   margin-left: -200px;
           
		   -webkit-transition: all 0.2s linear;
			-o-transition: all 0.2s linear;
			transition: all 0.2s linear;
		}
		
		.alertShow{
			top:10%;
		}
		.alertHide{
			top:-220px;
			opacity:0.1;
		}
		.alertHint{
			width: 100%;
			height: 35px;
			background: #F7F7F7;
			border-bottom: 1px solid #ddd;
		}
		.alertTitle{
			line-height: 35px;
			float: left;
			background: #F7F7F7;
		}
		.alertTitle>span{
			display: inline-block;
			margin-left: 8px;
			font-family: "微软雅黑";
		}
		.alertDelete{
			float: right;
			line-height: 35px;
			margin-right: 8px;
		}
		.alertDelete>span{
			display: inline-block;
			margin-right: 8px;
            cursor: pointer;			
		}
		.alertContent{
			margin-top: 10%;
			text-align: center;
		}
		.alertBtns{
			text-align: center;
			margin-top: 12%;
		}
		.alertBtns>button{
			width: 60px;
			height: 30px;
			border: none;
			cursor: pointer;
			outline: none;
			font-family: "微软雅黑";
		}
		#alertSureBtn{
			background:#2E8DED;
			border: 1px solid #2E8DED;
			color: #FFFFFF;
		}
		.buttonStyle:hover{
			opacity: 0.8;
		}
		.buttonStyle:active{
			-webkit-transform: scale(0.95);
            transform: scale(0.95);
		}
		</style>
	</head>
	<body>
		
		<button id="btn"> 提交</button>
		
		
		
			<div id="msg" class="alertHide">
			<div class="alertHint">
				<div class="alertTitle"><span>提示信息</span></div>
			    <div class="alertDelete"><span id="calIcon">取消</span></div>
			    <div style="clear: both;"></div>
			</div>
			<div class="alertContent">
				<span>(ง •̀_•́)ง确定删除吗...</span>
			</div>
			<div class="alertBtns">
				<button class="buttonStyle" id="alertSureBtn">确定</button>
				<button class="buttonStyle" id="alertCalBtn">取消</button>
			</div>
		    </div>
	
		
		
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script type="text/javascript">
		
		  $("#btn").bind("click",function(){
		  	 $("#msg").removeClass("alertHide").addClass("alertShow");
		  })
		  
		  $("#alertSureBtn,#alertCalBtn,#calIcon").bind("click",function(){
		  	 $("#msg").removeClass("alertShow").addClass("alertHide");
		  })
			
		</script>
	</body>
</html>
